<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>flex1</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
  body,html{
    margin:0;
    padding:0;
  }
  .Grid {
    display: flex;
  }

  .Grid-cell {
    flex: 1;
    height: 50px;
    line-height:50px;
    text-align:center;
  }
  .Grid-cell.u-full {
    flex: 0 0 100%;
  }

  .Grid-cell.u-1of2 {
    flex: 0 0 50%;
  }

  .Grid-cell.u-1of3 {
    flex: 0 0 33.3333%;
  }

  .Grid-cell.u-1of4 {
    flex: 0 0 25%;
  }
  .a{
    background-color: #abcabc;
  }
  .b{
    background-color: #abcdef;
  }
  .w200{
    flex:0 0 200px;
  }
</style>
</head>
<body>
  <div class="Grid">
    <div class="Grid-cell a">1/3</div>
    <div class="Grid-cell b">1/3</div>
    <div class="Grid-cell a">1/3</div>
  </div>
  <hr>
  <div class="Grid">
    <div class="Grid-cell a">1/4</div>
    <div class="Grid-cell b">1/4</div>
    <div class="Grid-cell a">1/4</div>
    <div class="Grid-cell b">1/4</div>
  </div>
  <hr>
  <div class="Grid">
    <div class="Grid-cell u-1of4 a">1/4</div>
    <div class="Grid-cell b">auto</div>
    <div class="Grid-cell u-1of3 a">1/3</div>
  </div>
  <hr>
  <div class="Grid">
    <div class="Grid-cell b">auto</div>
    <div class="Grid-cell u-1of3 a">1/3</div>
  </div>
  <hr>
  <div class="Grid">
    <div class="Grid-cell u-1of2 a">1/4</div>
    <div class="Grid-cell b">auto</div>
    <div class="Grid-cell b">auto</div>
  </div>
  <div class="Grid">
    <div class="Grid-cell u-1of2 a">1/4</div>
    <div class="Grid-cell w200 b">200px</div>
    <div class="Grid-cell b">auto</div>
  </div>
</body>
</html>